<template>
  <view class="recruitmentDetails" v-if="recruitInfosDetailAll">
    <view style="padding: 16px">
      <view class="recruitDetails">
        <view>
          {{ recruitInfosDetailAll.postName }}
          <text
            v-if="recruitInfosDetailAll.isEmergency"
            class="contentHoConBackTop2"
            >急招</text
          >
          <text
            class="contentHoConBackTop22"
            v-if="
              recruitInfosDetailAll.workType &&
              recruitInfosDetailAll.workType === 1
            "
            >全职</text
          >
          <text
            class="contentHoConBackTop33"
            v-if="
              recruitInfosDetailAll.workType &&
              recruitInfosDetailAll.workType === 2
            "
            >兼职</text
          >
        </view>
        <view class="recruitDetailsMoney">
          <span
            v-if="
              recruitInfosDetailAll.lowestSalary ===
              recruitInfosDetailAll.highestSalary
            "
            >{{ recruitInfosDetailAll.highestSalary }}元</span
          >
          <span v-else
            >{{ recruitInfosDetailAll.lowestSalary }}-{{
              recruitInfosDetailAll.highestSalary
            }}元</span
          >
          <text
            >/{{
              salaryGrantTypeArr[recruitInfosDetailAll.salaryGrantType]
            }}</text
          >
        </view>
      </view>
      <view class="recruitDetailsTitle">
        <text class="paddrig8">
          {{ recruitInfosDetailAll.workingSeniority | workingSeniorityFun }}
        </text>
        <text class="paddrig8">|</text>
        <text>
          {{ recruitInfosDetailAll.lowestEducation | lowestEducationFun }}
        </text>
      </view>
      <view class="recruitDetailszprs marginTop14">
        <img class="recruitDetailszprsIMg" src="../static/groupFill.png" alt />
        招聘人数：{{ recruitInfosDetailAll.number }}
      </view>
      <view
        class="shangBack"
        v-if="recruitInfosDetailAll.empRuleIsOpen"
        @click="showBounty = true"
      >
        <view style="display: flex; align-items: center">
          <img class="shangIcon" src="../static/tuijian.png" alt />
          <text style="vertical-align: middle">推荐入职，拿赏金</text>
        </view>
        <view style="display: flex; align-items: center">
          <img class="shang" src="../static/shang.png" alt />
          <text class="shangNum">{{
            recruitInfosDetailAll.empMoneyReward || 0
          }}</text>
        </view>
      </view>
    </view>
    <view class="recruitDetailsIntroIntro">
      <view class="recruitDetailsIntroIntroBox">
        <img class="recruitDetailsIntroImg" :src="companyUnit.logo" alt />
        <!-- ../../../static/avatar.jpeg -->
        <view>
          <view class="recruitDetailsIntronName">
            {{ companyUnit.legalPerson }}
            <!-- <text class="recruitDetailsIntronHr">HR</text> -->
          </view>
          <view>
            <text class="recruitDetailsIntronText"
              >手机号码： {{ companyUnit.companyTelephone | formatPhone }}</text
            >
          </view>
        </view>
      </view>
      <view>
        <u-icon
          name="phone-fill"
          @click="openPhone(companyUnit.companyTelephone)"
          size="48"
          color="rgba(36, 207, 103, 1)"
        ></u-icon>
      </view>
    </view>
    <view>
      <view style="padding: 0 16px">
        <view class="recruitDetailsZWMS">
          <text class="zwmsBorder"></text>职位描述
        </view>
        <view class="margin32">
          <view>
            <text class="positionShow">{{ position }}</text>
          </view>
        </view>
      </view>
      <view class="hei8"></view>
      <view style="padding: 0 16px">
        <view class="recruitDetailsZWMS">
          <text class="zwmsBorder"></text>薪资福利
        </view>
        <view class="xzfl">
          <view class="marBottim">
            薪资：
            <span
              v-if="
                recruitInfosDetailAll.lowestSalary ===
                recruitInfosDetailAll.highestSalary
              "
              >{{ recruitInfosDetailAll.highestSalary }}元</span
            >
            <span v-else
              >{{ recruitInfosDetailAll.lowestSalary }}-{{
                recruitInfosDetailAll.highestSalary
              }}元</span
            >
            <text
              >/{{
                salaryGrantTypeArr[recruitInfosDetailAll.salaryGrantType]
              }}</text
            >
          </view>
          <view class="marBottim">
            发薪日：每月
            <span
              v-if="[-1, -2, -3].includes(recruitInfosDetailAll.payday)"
              >{{ paydayArr[Math.abs(recruitInfosDetailAll.payday)-1] }}</span
            ><span v-else>{{ recruitInfosDetailAll.payday }}日</span>
          </view>
          <view class="margin32">
            <view v-if="recruitInfosDetailAll.highlights">
              公司福利：
              <text
                class="xzflgsfl"
                v-for="i in recruitInfosDetailAll.highlights.split(',')"
                :key="i"
                >{{ i }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <view class="hei8"></view>
      <view style="padding: 0 16px">
        <view
          class="recruitDetailsZWMS"
          v-if="
            recruitInfosDetailAll.officeEnvironment ||
            recruitInfosDetailAll.video
          "
        >
          <text class="zwmsBorder"></text>工作环境
        </view>
        <view class="gzhjBox" v-if="recruitInfosDetailAll.officeEnvironment">
          <scroll-view scroll-x="true">
            <view
              v-for="(i, index) in recruitInfosDetailAll.video"
              :key="i"
              style="display: inline-block"
            >
              <video
                style="width: 160px; height: 120px; margin-right: 8px"
                :id="'myVideo' + index"
                :src="i"
              ></video>
            </view>
            <img
              class="gzhj"
              v-for="i in recruitInfosDetailAll.officeEnvironment.split(',')"
              :key="i"
              :src="i"
              alt
            />
          </scroll-view>
        </view>
      </view>
      <view class="hei8" v-if="recruitInfosDetailAll.officeEnvironment"></view>
      <view style="padding: 0 16px">
        <view class="recruitDetailsZWMS">
          <text class="zwmsBorder"></text>公司信息
        </view>

        <view class="company margin32" @click="goCompany">
          <view class="companyBox">
            <img class="companyImg" :src="companyUnit.logo" alt />
            <view class="marleft9">
              <view class="companyName">
                {{ recruitInfosDetailAll.companyUnitName || "" }}
              </view>
              <view class="companyWlw">
                <text
                  :key="z"
                  v-for="z in recruitInfosDetailAll.cityName
                    .split(',')
                    .splice(1)"
                  >{{ z }}</text
                >
                <text class="marleft5">
                  {{ recruitInfosDetailAll.companyIndustryFirst || "" }}
                </text>
                <text class="marleft5">
                  {{ recruitInfosDetailAll.properties || "" }}
                </text>
              </view>
            </view>
          </view>
          <view>
            <u-icon
              name="arrow-right"
              size="36"
              color="rgba(166, 168, 180, 1)"
            ></u-icon>
          </view>
        </view>
      </view>
      <view class="hei8"></view>
      <view style="padding: 0 16px">
        <view class="recruitDetailsZWMS">
          <text class="zwmsBorder"></text>公司地址
        </view>
        <view class="gongsidizhi" v-if="companyUnit.address">
          <text
            :key="z"
            v-for="z in companyUnit.address.split(',').splice(1)"
            >{{ z }}</text
          >
        </view>
      </view>
      <view class="hei8" style="height: 32px"></view>
    </view>
    <view style="height: 59px"></view>

    <view class="like">
      <view class="likeBox" style="width: 100%" v-if="userShowAll">
        <button
          class="likeShare"
          :disabled="showShareDisabled"
          @click="openShowShare"
        >
          分享
        </button>
        <button @click="openApplyJob" class="likeapplyJob margin8">推荐</button>
      </view>
    </view>
    <u-popup v-model="showShare" mode="bottom" border-radius="14">
      <view class="padd5" @click="WechatSharePictures">
        <view class="indexWorkPoptext">
          <img class="indexWorkPopimg" src="../static/pyq.png" alt />
          生成朋友圈分享图
        </view>
        <view>
          <u-icon name="arrow-right" color="#ACAFC5" size="32"></u-icon>
        </view>
      </view>
      <u-gap height="8" bg-color="#F3F5FB"></u-gap>
      <view class="popupPop" @click="showShare = false">取消</view>
    </u-popup>
    <u-popup v-model="showBounty" mode="center" border-radius="14" length="80%">
      <view class="popupBounty">
        <view class="popupBountyTitle">赏金规则</view>
        <view class="popupBountyCon">
          <!-- {{recruitInfosDetailAll.empRule}} -->
          <view v-for="c in empRule" :key="c">
            <text
              >工作满{{ c.workingTime
              }}{{ c.timeType === "1" ? "天" : "月" }},您将收益{{ c.grantCount
              }}{{ c.grantType === "1" ? "%" : "元" }}</text
            >
          </view>
        </view>
      </view>
    </u-popup>
    <phoneNumberAuth
      v-if="openPhoneShow"
      @showFun="openPhoneShow = false"
    ></phoneNumberAuth>
  </view>
</template>

<script>
import {
  recruitInfosDetail,
  selectFirstOneByUserId,
  companyUnits,
  selectByRandomKey,
} from "./api";
import { getQRCodeByrecruitInfoIds } from "./api";
import { verify_home, selectByRandomKeyFun } from "@/utils/public";
import { mapState } from "vuex";
// import phoneNumberAuth from "../../../components/phoneNumberAuth/phoneNumberAuth";
import { weixinCheck, weixinCheckPhone } from "@/services/auth";
export default {
  data() {
    return {
      paydayArr: ["月初", "月中", "月底"],
      salaryGrantTypeArr: ["小时", "日", "月", "年"],
      showShareDisabled: false,
      qrCodeUrl: "",
      videoContext: "",
      video: null,
      myVideoUrl: "",
      empRule: null,
      showBounty: false,
      showrecommended: false,
      openPhoneShow: false,
      userShowAll: false,
      position: "",
      companyUnit: {},
      recruitInfosDetailAll: null,
      selectFirstUser: {},
      selectFirstUserShow: false,
      showShare: false,
      showApplyJob: false,
      entryList: [
        {
          id: "1",
          name: "分享给微信好友",
          img: require("../static/wx.png"),
          url: "/pages/entryAll/manualAdd/manualAdd",
        },
        {
          id: "2",
          name: "生成朋友圈分享图",
          img: require("../static/pyq.png"),
          url: "/pages/entryAll/QRCodeInvitation/QRCodeInvitation",
        },
      ],
    };
  },
  // components: { phoneNumberAuth },
  computed: {
    ...mapState(["user", "jobSeeker"]),
    principalType() {
      return this.user.sourceType;
    },
    loginType() {
      return this.user.loginType;
    },
  },
  onReady: function (res) {
    this.videoContext = uni.createVideoContext("myVideo");
  },
  filters: {
    formatPhone(p) {
      if (p) {
        return p.substring(0, 3) + "****" + p.substring(p.length - 4);
      }
    },
    workingSeniorityFun(val) {
      if (val === 1) {
        return "不限";
      } else if (val === 2) {
        return "应届生";
      } else if (val === 3) {
        return "1-3年";
      } else if (val === 4) {
        return "3-5年";
      } else if (val === 5) {
        return "5-10年";
      } else if (val === 6) {
        return "10年以上";
      } else {
        return "";
      }
    },
    lowestEducationFun(val) {
      if (val === 1) {
        return "初中";
      } else if (val === 2) {
        return "中专";
      } else if (val === 3) {
        return "大专";
      } else if (val === 4) {
        return "高中";
      } else if (val === 5) {
        return "本科";
      } else if (val === 6) {
        return "硕士";
      } else if (val === 7) {
        return "博士";
      } else if (val === 8) {
        return "其他";
      } else {
        return "";
      }
    },
  },
  onLoad(e) {
    // getApp().globalData.query.recruitIdsCacheKey
    if (e.recruitInfoId) {
      this.recruitInfoId = e.recruitInfoId;
      this.getrecruitInfosDetail();
    } else {
      // this.recruitInfoId = e.recruitIdsCacheKey.split("ids:")[1];
      // console.log(" this.recruitInfoId", this.recruitInfoId);
      // selectByRandomKeyFun(this.recruitInfoId)
      //   .then(res => {
      //     console.log(res);
      //     this.recruitInfosDetailVal(res.recruitInfoVOList[0]);
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    }
  },
  onShow() {
    verify_home()
      .then(() => {
        this.userShowAll = true;
        this.userShow = true;
      })
      .catch(() => {
        this.userShowAll = true;
        // uni.navigateTo({
        //   url: "/authorize/login"
        // });
      });
  },
  methods: {
    recommended() {
      this.showrecommended = true;
    },

    openPhoneCal() {
      this.openPhoneShow = true;
    },
    getPhoneNumber: function (e) {
      wx.checkSession({
        success(res) {
          console.log("debug log --> ", res);
        },
        fail(err) {
          console.log("debug log --> ", err);
        },
      });
      // wx.login({
      //   success: res => {
      //     if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
      //       wx.showToast({
      //         icon: "none",
      //         title: "请允许获取手机号，否则功能不可用！"
      //       });
      //       return;
      //     }
      //     wx.checkSession({
      //       success: function() {
      //         var ency = e.detail.encryptedData;
      //         var iv = e.detail.iv;
      //         const data = {
      //           iv: iv,
      //           encryptedData: ency
      //         };
      //         weixinCheckPhone(data);
      //       },

      //       fail: function(err) {
      //         console.log(err, "session_key 已经失效，需要重新执行登录流程");
      //       }
      //     });
      //   }
      // });
    },
    collection() {
      uni.showToast({
        title: "暂未开放该功能",
        icon: "none",
        duration: 2000,
      });
    },
    getrecruitInfosDetail() {
      recruitInfosDetail(this.recruitInfoId).then((res) => {
        this.recruitInfosDetailVal(res);
      });
    },
    recruitInfosDetailVal(res) {
      if (res && res.video && !(res.video instanceof Array)) {
        const video = res.video.split(",").filter(function (s) {
          return s && s.trim();
        });
        res.video = video.map((i) => `${i.split("|name|")[0]}`);
      }
      this.recruitInfosDetailAll = res;
      this.empRule = res.empRule ? JSON.parse(res.empRule) : [];
      this.position = this.recruitInfosDetailAll.postDescribe.replace(
        /↵/g,
        "\n"
      );
      this.companyUnit = res.companyUnitsVO;
    },
    openShowShare() {
      this.showShareDisabled = true;
      const data = {
        siteId: this.$store.state.user.siteId,
        sourceId: uni.getStorageSync("empId"),
        sourceType: "emp",
        recruitIds: [this.recruitInfosDetailAll.id],
      };
      getQRCodeByrecruitInfoIds(data).then((res) => {
        this.qrCodeUrl = res.qrCodeUrl;
        this.showShare = true;
        this.showShareDisabled = false;
      });
    },
    WechatSharePictures() {
      uni.navigateTo({
        url: `/recruitment/recruitment/wechatSharePictures/wechatSharePictures?qrCodeUrl=${this.qrCodeUrl}`,
      });
      this.showShare = false;
    },
    openPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
        success: (res) => {
          console.log("调用成功!");
        },
        fail: (res) => {
          console.log("调用失败!", res);
        },
      });
    },
    async onShareAppMessage(options) {
      const data = {
        siteId: this.$store.state.user.siteId,
        sourceId: this.$store.state.user.sourceId,
        sourceType: this.$store.state.user.sourceType,
        recruitIds: [this.recruitInfosDetailAll.id],
      };
      var that = this; // 设置菜单中的转发按钮触发转发事件时的转发内容
      const shareObj = await getQRCodeByrecruitInfoIds(data).then((res) => {
        var shareObj = {
          title: "分享好友", // 默认是小程序的名称(可以写slogan等)
          path: `/${res.pageUrl}`, // 默认是当前页面，必须是以‘/’开头的完整路径
          success: function (res) {
            // 转发成功之后的回调
            // if (res.errMsg === "shareAppMessage:ok") {
            // }
          },
        }; // 来自页面内的按钮的转发
        if (options.from === "button") {
          var eData = options.target.dataset;
          shareObj.path = `/${res.pageUrl}`;
        } // 返回shareObj
        return shareObj;
      });
      return shareObj;
    },
    showApplyJobFun() {
      const data = {
        phone: this.user.phone,
      };
      selectFirstOneByUserId(data).then((res) => {
        // 有数据就展示简历 没数据就是 录入简历
        this.selectFirstUser = res;
        if (res) {
          this.selectFirstUserShow = true;
        } else {
          this.selectFirstUserShow = false;
        }
        //
      });
      this.showApplyJob = true;
    },
    goCompany() {
      uni.navigateTo({
        url: `/pushPages/company/companyDetails/companyDetails?companyUnitId=${this.recruitInfosDetailAll.companyUnitId}`,
      });
    },
    openApplyJob() {
      const data = {
        recruitInfoId: this.recruitInfosDetailAll.id,
        brokerRule: this.recruitInfosDetailAll.brokerRule,
        companyUnitId: this.recruitInfosDetailAll.companyUnitId,
        empRule: this.recruitInfosDetailAll.empRule,
        empMoneyReward: this.recruitInfosDetailAll.empMoneyReward,
        empRuleIsOpen: this.recruitInfosDetailAll.empRuleIsOpen,
      };
      uni.navigateTo({
        url: `/applyJob/applyJob/addApplyJob/addApplyJob?data=${JSON.stringify(
          data
        )}&selectFirstUser=${
          this.selectFirstUserShow ? JSON.stringify(this.selectFirstUser) : null
        }`,
      });
    },
  },
};
</script>

<style lang="scss">
@import "../../../styles/styles.scss";
@import "./index.scss";
</style>
